<!--  -->
<template>
<div>
    <div v-show="showpage">
    <card>
        <span>姓名: </span><el-input style="width:200px;margin-right: 20px;" v-model="sname" placeholder="请输入姓名"></el-input>
        <span>手机号: </span><el-input style="width:200px;margin-right: 20px;" v-model="sphone" placeholder="请输入手机号"></el-input>
        <span>身份证号: </span> <el-input style="width:200px" v-model="sidNum" placeholder="请输入身份证号"></el-input>
         <el-button type="primary" @click="search">查询</el-button>
         <el-button type="warning" @click="reset">重置</el-button>
      </card>
      <card>
        <Table :columns="columns" :data="blackData">
        <template #name="{ row }">
            <strong>{{ row.name }}</strong>
        </template>
        <template #action="{ row, index }">
            <!-- <Button type="primary" style="margin-right: 5px" @click="show(row)">查看</Button> -->
            <Button type="error" @click="removeBlack(row)">移除黑名单</Button>
        </template>
        </Table>
        <Modal
            title="移除黑名单备注"
            v-model="modal2"
            @on-ok="ok"
            @on-cancel="cancel"
            class-name="vertical-center-modal">
           <div style="display: flex;">
            <p style="margin-right: 6px;">备注</p>
           <textarea name="备注" id="ipt" cols="60" rows="10" style="padding:5px"></textarea>
           </div>
        </Modal>
        <el-pagination
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :page-sizes="[5, 10, 30, 50]"
      layout="total,sizes, prev, pager, next, jumper"
      :total="total">
      <!-- 少一个sizes不显示每页多少条 -->
    </el-pagination>
      </card>
</div>
<div v-show="!showpage">
        <div style="font-size:16px">
         <span>黑名单管理/&nbsp;&nbsp;</span><span @click="todetail">黑名单列表/&nbsp;&nbsp;</span><span style="color:black">用户详情</span>
        </div>
        <card style="width: 100%; margin-top: 10px;">
            <div class="news">基本信息</div>
            <div class="contents">
                <div class="tub"><i class="el-icon-user"></i></div>
                <div style="flex:1;padding-left:8px;">
                    <p style=" margin-bottom: 8px; font-weight:550; color:black;">姓名:{{detaildata.name}}</p>
                    <div  class="threef">
                        <div>当前状态:{{}}</div>
                        <div>数据来源:</div>
                    </div>
                    <div class="threef">
                       <div>注册时间:{{}}</div><div>性别:</div><div>年龄:</div>
                    </div>
                    <div class="threef">
                        <div>最近预约到馆:{{}}</div><div>手机号码:{{}}</div><div>身份证号:{{}}</div>
                    </div>
                    
                </div>
            </div>
        </card>
        <card style="width: 100%; margin-top: 10px;">
            <div class="news">交易统计</div>
            <div class="numcon">
                <div>
                    <div>预约次数</div>
                    <div style="margin-left:34px">{{}}<span>次</span></div>
                </div>
                <div>
                    <div>核销次数</div>
                    <div style="margin-left:34px">{{}}<span>次</span></div>
                </div>
                <div>
                    <div>未核销次数</div>
                    <div style="margin-left:34px">{{}}<span>次</span></div>
                </div>
                <div>
                    <div>取消次数</div>
                    <div style="margin-left:34px">{{}}<span>次</span></div>
                </div>
            </div>

        </card>
        <card style="width: 100%; margin-top: 10px;">
            <div class="news">预约明细</div>
            <Table :columns="columns1" :data="data1">
                <template #name="{ row }">
                    <strong>{{ row.name }}</strong>
                </template>
                <template #action="{ row, index }">
                    <Button type="primary"  @click="details(row)">查看详情</Button>
                </template>
            </Table> 
            <el-pagination
                @current-change="handleCurrentChange1"
                @size-change="handleSizeChange1"
                :current-page="currentPage1"
                :page-size="pageSize1"
                :page-sizes="[5, 10, 20, 50]"
                layout="total,sizes, prev, pager, next, jumper"
                :total="total1">               
            </el-pagination>  
        </card>
        <card style="width: 100%; margin-top: 10px;">
            <div class="news">黑名单明细</div>
            <Table :columns="columns2" :data="data2">
                <template #name="{ row }">
                    <strong>{{ row.name }}</strong>
                </template>
                <template #action="{ row, index }">
                    <Button type="primary"  @click="details(row)">查看详情</Button>
                </template>
            </Table> 
            <el-pagination
                @current-change="handleCurrentChange2"
                @size-change="handleSizeChange2"
                :current-page="currentPage2"
                :page-size="pageSize2"
                :page-sizes="[5, 10, 20, 50]"
                layout="total,sizes, prev, pager, next, jumper"
                :total="total2">               
            </el-pagination>  
        </card>
</div>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
    showpage:true,
    sname:'',
    sphone:'',
    sidNum:'',
    modal2: false,
    columns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    type: 'index',
                    title: '编号',
                    width: 80,
                    align: 'center'
                },
                {
                    title: '姓名',
                    slot: 'name',
                    align: 'center'
                },
                {
                    title: '手机号码',
                    key: 'phone',
                    align: 'center'
                },
                {
                    title: '身份证号',
                    key: 'cardNum',
                    align: 'center'
                },
                {
                    title: '最近一次加入时间',
                    key: 'gmtCreate',
                    align: 'center'
                },
                {
                    title: '理由',
                    key: 'reason',
                    align: 'center'
                },
                {
                    title: '操作员',
                    key: 'operator',
                    align: 'center'
                },
                {
                    title: '操作',
                    slot: 'action',
                    align: "center"
                    }
                ],
    columns1:[
        {
            title: '预约到馆日期',
            key: 'travelDate',
            align: 'center'
        },
        {
            title: '预约到馆场次',
            key: 'sessionTime',
            align: 'center'
        },
        {
            title: '提交预约时间',
            key: 'gmtCreate',
            align: 'center'
        },
        {
            title: '当前状态',
            key: 'status',
            align: 'center'
        },
        {
            title: '操作时间',
            key: 'gmtModified',
            align: 'center'
        },
        {
            title: '操作',
            slot: 'action',
            align: "center"
            }
        ],
        columns2:[  {
            type: 'index',
            title: '编号',
            width: 80,
            align: 'center'
        },
        {
            title: '加入时间',
            key: 'gmtCreate',
            align: 'center'
        },
        {
            title: '拉入操作人',
            key: 'operator',
            align: 'center'
        },
        {
            title: '拉入理由',
            key: 'reason',
            align: 'center'
        },
        {
            title: '释放时间',
            key: 'gmtModified',
            align: 'center'
        },
        {
            title: '释放理由',
            key: 'removeReason',
            align: 'center'
        },
        {
            title: '释放操作人',
            key: 'removeOperator',
            align: 'center'
        }
        ],   
    blackData:[],
    total: 0,
    currentPage:1, // 当前页数
    pageSize: 10, // 当前每页显示多少条数据
    rows:[],
    openid:'',
    cardNum:'',
    detaildata:[],
    data1:[],
    total1: 0,
    currentPage1:1, // 当前页数
    pageSize1: 10, // 当前每页显示多少条数据
    data2:[],
    total2: 0,
    currentPage2:1, // 当前页数
    pageSize2: 10, // 当前每页显示多少条数据


};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
    // 获取黑名单的数据
    getblacklist(){
        this.$http(
            "/chongqing/stage/blacklist/findPage",
            {
                cardNum: this.sidNum,
                name: this.sname,
                orders: [
                    {
                    "asc": true,
                    "column": ""
                    }
                ],
                phone: this.sphone, 
                size: this.pageSize,
                current: this.currentPage,
            },
            "post",
            (res)=>{
                console.log("黑名单的数据",res);
                this.blackData=res.data.data.records
                this.total=res.data.data.total        
            }
        )
    },
    handleSizeChange(pageSize) {
        // console.log(`每页 ${val} 条`);
        this.pageSize = pageSize;
        this.currentPage=1;
        this.getblacklist();
      },
      handleCurrentChange(currentPage) {
        console.log(`当前页: ${currentPage}`);
          this.currentPage = currentPage;
          this.getblacklist();
      },
    show(row) {
        this.showpage=false
        console.log(row);
        this.openid=row.openid
        this.cardNum=row.cardNum
        this.viewtodetail()
        this.orderpage()
        this.blackpage()
    },
    viewtodetail(){
            this.$http(
                '/chongqing/stage/blacklist/findBaseTravelInfo',
                {
                cardNum:this.cardNum,
                openid:this.openid
                },
                'post',
                (res)=>{
                    console.log(res,"查看跳到详情页的数据");
                    this.detaildata=res.data.data

                }
            )
        },
    orderpage(){
            this.$http(
                '/chongqing/stage/blacklist/findBlacklistOrderPage',
                {
                    cardNum: this.cardNum,                   
                    openid: this.openid,
                    orders: [
                        {
                        "asc": true,
                        "column": ""
                        }
                    ],
                    size: this.pageSize1,
                    current: this.currentPage1,
                },
                'post',
                (res)=>{
                    console.log(res,"预约分页记录");
                    this.data1=res.data.data.records
                    this.total1=res.data.data.total
                    this.data1.map((item)=>{
                        if(item.status==1){
                            item.status="待使用"
                        }if(item.status==2){
                            item.status="已使用"
                        }if(item.status==3){
                            item.status="已取消"
                        }if(item.status==4){
                            item.status="已过期"
                        }
                    })
                 
                }
            )
        },
    handleSizeChange1(pageSize) {
    // console.log(`每页 ${val} 条`);
    this.pageSize1 = pageSize;
    this.currentPage1=1;
    this.orderpage();
    },
    handleCurrentChange1(currentPage) {
    console.log(`当前页: ${currentPage}`);
    this.currentPage1 = currentPage;
    this.orderpage();
    
    },
    blackpage(){
        this.$http(
            '/chongqing/stage/blacklist/findTravelBlacklistPage',
            {
                cardNum: this.cardNum,                   
                openid: this.openid,
                orders: [
                    {
                    "asc": true,
                    "column": ""
                    }
                ],
                size: this.pageSize2,
                current: this.currentPage2,
            },
            'post',
            (res)=>{
                console.log(res,"黑名单分页数据");
                this.data2=res.data.data.records
                this.total2=res.data.data.total
            }
        )

      },
      handleSizeChange2(pageSize) {
        // console.log(`每页 ${val} 条`);
        this.pageSize2 = pageSize;
        this.currentPage2=1;
        this.blackpage();
      },
      handleCurrentChange2(currentPage) {
        console.log(`当前页: ${currentPage}`);
          this.currentPage2 = currentPage;
          this.blackpage();
      },



    todetail(){
        this.showpage=true
    },
    removeBlack(row){
    //    this.data.splice(0,1)
    this.modal2 = true
    console.log(row,"移除");
    this.rows=row
    document.getElementById("ipt").value=''
    // this.$http(
    //             "/chongqing/stage/blacklist/updateBlacklist",
    //             {
    //                 "id": row.id,
    //                 "removeReason": row.removeReason
    //             },
    //             "post",
    //             (res)=>{
    //                 console.log("移除黑名单",res);
    //                 this.getblacklist()
    //             }
    //         )

   },
   ok () {
    console.log(this.rows,"11111111");
    var txt=document.getElementById("ipt").value
    console.log(txt);
    this.rows.removeReason=txt
    if(!this.rows.removeReason){
        this.$Message.info('请备注移出理由');
    }
    if(this.rows.removeReason){
        this.$http(
            "/chongqing/stage/blacklist/updateBlacklist",
            {
                "id": this.rows.id,
                "removeReason": this.rows.removeReason
            },
            "post",
            (res)=>{
                console.log("移除黑名单",res);
                this.$Message.info('移除黑名单成功');
                this.getblacklist()                   
            }              
        )              
        this.$Message.info('备注成功');
    }
    txt=''
  
    },


    cancel () {
        this.$Message.info('已经取消');
    },
    search(){
        console.log(this.sname);
        this.getblacklist()
    },
    reset(){        
        this.sname='',
        this.sphone='',
        this.sidNum=''
        this.getblacklist()
    } 

},
beforeCreate() {}, //生命周期 - 创建之前
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
beforeMount() {}, //生命周期 - 挂载之前
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
    this.getblacklist()

},
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
    .vertical-center-modal{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .vertical-center-modal .ivu-modal{
        top: 0;
    }
    a{
        text-decoration: none;
        color: black;
    }
    .news{
        width: 100%;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        padding-left: 8px;
        border-left: 8px solid blue;
    }
    .contents{
        display:flex; 
        justify-content:start; 
        width: 100%;
        margin-top: 10px;
    }
    .tub{
        width: 50px;
        height: 50px;
        background-color: #ccc;
        border-radius: 25px;
        text-align: center;
        line-height: 50px;
    }
    .el-icon-user{
        font-size: 26px;
        margin-top: 10px;
    }
    .threef{
        display: flex;
        margin-bottom: 8px;
        align-items: center;
        div{
            width: 33%;
        }
    }
    .numcon{
        display: flex;
        div{
            width: 20%;
            margin-left: 20px;
            font-weight: 550; 
            color: rgb(56, 53, 53);
            margin-top: 10px;
            div{
                width: 100%;
                margin-top: 10px;
                span{
                    font-weight: normal;
                    color: #515A6E;
                }
            }
        }
    }
</style>